<template>
  <form class="home">
    <section class="main-body">
  	<div id="bannerWarp">
  	  <div class="banner">
  		<ul class="slides">
  		  <li class="flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; opacity: 1; display: block; z-index: 2;">
  			<img src="https://kancha-1258911605.cos.ap-guangzhou.myqcloud.com/front/080210011900x500.jpg" draggable="false">
  			<div class="col-md-12" id="intro-main1">
  			  <h1>
  				<span color="">
  				</span>
  			  </h1>
  			  <h2>
  			  </h2>
  			  <h2>
  			  </h2>
  			  <div class="btn-banner-group">
  				<a target="_blank" title="&lt;span color=&quot;&quot;&gt;&lt;/span&gt;" class="btn btn-default btn-focus btn-white">查看详情</a>
  			  </div>
  			</div>
  		  </li>
  		</ul>
  		<ol class="flex-control-nav flex-control-paging">
  		</ol>
  		<ul class="flex-direction-nav">
  		  <li>
  			<a class="flex-prev flex-disabled"  tabindex="-1">Previous</a>
  		  </li>
  		  <li>
  			<a class="flex-next flex-disabled"  tabindex="-1">Next</a>
  		  </li>
  		</ul>
  	  </div>
  	</div>
  	<!-- <div class="container sc-news">
  	  <div class="sc-tit">热点关注：</div>
  	  <marquee class="sc-box" scrollamount="3" behaviour="Scroll" direction="Left">
        <span v-for="index of 8">
          <a target="_blank">{{index}}关于做好申报中设协2021年度全国勘察设计行业奖（工业奖）的通知</a>
        </span>
  	  </marquee>
  	</div> -->

    <div class="box">
      <div class="item">
        <div class="news-title">
          <div class="title-text">
            <h2>通知公告</h2>
            <a class="more" href="/news">更多&gt;&gt;</a>
          </div>
        </div>
        <ul>
          <li class="top1" v-if="tongzhi[0]">
            <a class="current" :href="'/newsview?type=1&id=' + tongzhi[0].id"
              :title="tongzhi[0].title">{{tongzhi[0].title}}</a>
            <span>{{tongzhi[0].contentTxt.substring(0,100)}}</span>
          </li>
          <li v-for="index of 8" v-if="tongzhi[index]">
            <a :href="'/newsview?type=1&id=' + tongzhi[index].id"
              :title="tongzhi[index].title">
            <i>{{index}}</i>{{tongzhi[index].title}}</a>
            <span>{{tongzhi[index].createdTime.substring(0,10)}}</span>
          </li>
        </ul>
      </div>
      <!-- 11 end -->
      <div class="item">
        <div class="news-title">
      	<div class="title-text">
      	  <h2>协会新闻</h2>
      	  <a class="more" href="/news2?type2=协会新闻">更多&gt;&gt;</a>
      	</div>
        </div>
        <div class="news_top">
          <ul class="xhnewspic">
            <li class="slide" v-for="index of 2" v-if="xinwen[index-1]">
              <a :href="'/newsview?type=1&id=' + xinwen[index-1].id">
                <img :src="xinwen[index-1].img">
                <p>{{xinwen[index-1].title}}</p>
              </a>
            </li>
          </ul>
        </div>
        <ul class="xhnews">
          <li v-for="index of 6" v-if="xinwen[index+1]">
            <a class="" :href="'/newsview?type=1&id=' + xinwen[index+1].id"
              :title="xinwen[index+1].title">{{xinwen[index+1].title}}</a>
            <span>{{xinwen[index+1].createdTime.substring(0,10)}}</span>
          </li>
        </ul>
      </div>
      <!-- 22 end -->

      <div class="item">
        <div class="news-title">
      	<div class="title-text">
      	  <h2>党建工作</h2>
      	  <a class="more" href="/news3">更多&gt;&gt;</a>
      	</div>
        </div>
        <ul>
      	<div class="news_top">
      	  <ul class="xhnewspic">
            <li class="slide" v-for="index of 2" v-if="dangjian[index]">
              <a :href="'/newsview?type=1&id=' + dangjian[index].id">
              <img :src="dangjian[index].img">
              <p>{{dangjian[index].title}}</p>
              </a>
            </li>
      	  </ul>
      	</div>
      	<ul class="xhnews">
      	  <li v-for="index of 6" v-if="dangjian[index+1]">
            <a class="" :href="'/newsview?type=1&id=' + dangjian[index+1].id"
              :title="dangjian[index+1].title">{{dangjian[index+1].title}}</a>
            <span>{{dangjian[index+1].createdTime.substring(0,10)}}</span>
      	  </li>
      	</ul>
        </ul>
      </div>
      <!-- 333 end -->
      <div class="item row2" id="sanshi">
        <div class="news-title">
      	<div class="title-text">
      	  <h2>行业动态</h2>
      	  <a class="more" href="/news2?type2=行业动态">更多&gt;&gt;</a>
      	</div>
        </div>
        <ul>
          <li class="top" v-for="index of 1" v-if="dongtai[index-1]">
            <img :src="dongtai[index-1].img">
            <a :href="'/newsview?type=1&id=' + dongtai[index-1].id" :title="dongtai[index].title">
              {{dongtai[index-1].title}}
              <p>{{dongtai[index-1].createdTime.substring(0,10)}}</p>
              <p>{{dongtai[index-1].contentTxt.substring(0,30)}}</p>
            </a>
          </li>
          <li v-for="index of 7" v-if="dongtai[index]">
            <a class="" :href="'/newsview?type=1&id=' + dongtai[index].id"
              :title="dongtai[index].title">{{dongtai[index].title}}</a>
          </li>
        </ul>
      </div>
      <div class="item row2" id="jishu">
        <div class="news-title">
          <div class="title-text">
            <h2>协会期刊</h2>
            <a class="more" href="/news2?type2=协会期刊">更多&gt;&gt;</a>
          </div>
        </div>
        <ul>
          <li class="top" v-if="qikan[0]">
            <img :src="qikan[0].img">
            <a :href="'/newsview?type=1&id=' + qikan[0].id" :title="dongtai[0].title">
              {{qikan[0].title}}
              <p>{{qikan[0].createdTime.substring(0,10)}}</p>
              <p>{{qikan[0].contentTxt.substring(0,30)}}</p>
            </a>
          </li>
          <li v-for="index of 7" v-if="qikan[index]">
            <a class="" :href="'/newsview?type=1&id=' + qikan[index].id"
              :title="qikan[index].title">{{qikan[index].title}}</a>
          </li>
        </ul>
      </div>
      <!-- 444 555 end -->
      <div class="item">
        <div class="news-title">
      	<div class="title-text">
      	  <h2>协会会员</h2>
      	  <a class="more" href="/news7">更多&gt;&gt;</a>
      	</div>
        </div>
      </div>
    </div>
    <el-tabs @tab-click="handleClick" tab-position="left" style="height: 300px;" class="tab">
      <el-tab-pane label="会长单位" name="HUI">
        <ul>
          <li v-for="item in branchData['HUI']">
            <a>{{item.name}}</a>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="副会长单位" name="FUHUI">
        <ul>
          <li v-for="item in branchData['FUHUI']">
            <a>{{item.name}}</a>
          </li>
        </ul>

      </el-tab-pane>
      <el-tab-pane label="常务理事单位" name="CWLISHI">
        <ul>
          <li v-for="item in branchData['CWLISHI']">
            <a>{{item.name}}</a>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="监事单位" name="JIANSHI">
        <ul>
          <li v-for="item in branchData['JIANSHI']">
            <a>{{item.name}}</a>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="理事单位" name="LISHI">
        <ul>
          <li v-for="item in branchData['LISHI']">
            <a>{{item.name}}</a>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="会员单位" name="HUIYUAN">
        <ul>
          <li v-for="item in branchData['HUIYUAN']">
            <a>{{item.name}}</a>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane label="分支机构" name="BRANCH">
        <ul>
          <li v-for="item in branchData['BRANCH']">
            <a>{{item.name}}</a>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
    <!-- <ul class="cat" id="memberlist">
      <li @click="branch('HUI')"
        :class="branchName == 'HUI' ? 'current':''">
        <i></i>
      </li>
      <li @click="branch('FUHUI')"
        :class="branchName == '' ? 'current':''">
        <i></i>
      </li>
      <li @click="branch('')"
        :class="branchName == 'CWLISHI' ? 'current':''">
        <i></i>
      </li>
      <li @click="branch('JIANSHI')"
        :class="branchName == 'JIANSHI' ? 'current':''">
        <i></i>
      </li>
      <li @click="branch('')"
        :class="branchName == 'LISHI' ? 'current':''">
        <i></i>
      </li>
      <li @click="branch('HUIYUAN')"
        :class="branchName == '' ? 'current':''">
        <i></i>
      </li>
      <li @click="branch('BRANCH')"
        :class="branchName == 'BRANCH' ? 'current':''">
        <i></i>
      </li>
    </ul>


  	<div id="linkWarp">
  	  <div class="link-header">
  		<div class="container">
  		  <h3>友情链接</h3>
  		</div>
  	  </div>
  	  <div class="linkDetail">
  		<div class="container">
  		  <div style="float:left;display:block;width:100%;height:15px;">
  		  </div>
  		  <div class="link-list">
  			<ul class="col-sm-12">
  			  <a target="_blank" title="住建部" href="http://www.mohurd.gov.cn/">住建部</a>|
  			  <a target="_blank" title="广东建设信息网" href="http://www.gdcic.net/GdcicIms/">广东建设信息网</a>|
  			  <a target="_blank" title="中国勘察设计协会" href="http://www.chinaeda.org.cn/">中国勘察设计协会</a>|
  			  <a target="_blank" title="广东省住房和城乡建设厅" href="http://zfcxjst.gd.gov.cn/">广东省住房和城乡建设厅</a>|
  			  <a target="_blank" title="深圳勘察设计" href="http://www.szjs.com.cn/">深圳勘察设计</a>|
  			  <a target="_blank" title="广东造价" href="http://www.gdcost.com/">广东造价</a>
  			</ul>
  		  </div>
  		</div>
  	  </div>
  	</div>
    -->

    </section>


  </form>
</template>

<script>
import {enums} from "@/utils";
import Data from '@/api/data'

export default {
  name: 'Index',
  props:{
    layout: String
  },
  data() {
    return {
      tongzhi: [],
      dangjian: [],
      dongtai: [],
      xinwen:[],
      qikan:[],
      listQuery: {
        page: 1,
        status: "NORMAL",
      },

      branchName: "HUI",
      branchData: {},

    }
  },
  watch: {
  },
  computed: {
  },
  created() {
    this.fetchList({...this.listQuery,
      type1:"通知公告", size: 9}, "tongzhi")
    this.fetchList({...this.listQuery,
      type1:"党建工作", size: 8}, "dangjian")
    this.fetchList({...this.listQuery,
      type: "行业动态", type2:"协会新闻", size: 8}, "xinwen")
    this.fetchList({...this.listQuery,
      type: "行业动态", type2:"协会期刊", size: 8}, "qikan")
    this.fetchList({...this.listQuery,
      type: "行业动态", type2:"行业动态", size: 8}, "dongtai")

    this.branch(this.branchName)
    console.log(this.$data)
  },
  methods: {
    handleClick(tab, event) {
      this.branch(tab.name)
    },
    branch(name) {
      this.branchName = name
      if(!this.branchData[this.branchName]) {
        Data.get("/branch", {type: this.branchName}).then(res=>{
          if (res) {
            this.$set(this.branchData, this.branchName, res.list)
          }
          console.log(this.branchData)
        })
      }
    },
    fetchList(data, key) {
      var _this = this;
      console.log("请求参数", data)
      Data.get("/article", data).then(res=>{
        if (res) {
          _this.$set(_this, key, res.list)
        }
        console.log("11",this.$data)
      })
    },
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/new_files_m/bootstrap.min.css";
@import "~@/styles/new_files_m/iconfont.css";
@import "~@/styles/new_files_m/comm.css";
@import "~@/styles/new_files_m/index.css";
</style>
